<!-- 问答列表筛选区域 -->
<div class="content-card mb-4">
    <div class="content-body">
        <h3 class="content-title mb-4">问答筛选</h3>
        
        <!-- 高级筛选折叠面板 -->
        <div class="mb-4">
            <button class="btn btn-outline-primary w-100 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="collapse" data-bs-target="#advancedFilters">
                <span>高级筛选</span>
                <i class="fas fa-chevron-down"></i>
            </button>
            
            <div id="advancedFilters" class="collapse mt-3 pt-3 border-top">
                <div class="row g-3">
                    <!-- 分类筛选 -->
                    <div class="col-md-3">
                        <label class="form-label">问题分类</label>
                        <select class="form-select">
                            <option value="">全部分类</option>
                            <option value="frontend">前端开发</option>
                            <option value="backend">后端开发</option>
                            <option value="ai">人工智能</option>
                            <option value="product">产品管理</option>
                            <option value="design">设计</option>
                            <option value="marketing">市场营销</option>
                        </select>
                    </div>
                    
                    <!-- 回答数量筛选 -->
                    <div class="col-md-3">
                        <label class="form-label">回答数量</label>
                        <select class="form-select">
                            <option value="">不限</option>
                            <option value="0">未回答</option>
                            <option value="1-5">1-5个回答</option>
                            <option value="6-10">6-10个回答</option>
                            <option value="10+">10个以上</option>
                        </select>
                    </div>
                    
                    <!-- 热度筛选 -->
                    <div class="col-md-3">
                        <label class="form-label">热度</label>
                        <select class="form-select">
                            <option value="all">全部</option>
                            <option value="hot">热门问题</option>
                            <option value="rising">上升最快</option>
                            <option value="unanswered">等待回答</option>
                        </select>
                    </div>
                    
                    <!-- 时间筛选 -->
                    <div class="col-md-3">
                        <label class="form-label">发布时间</label>
                        <select class="form-select">
                            <option value="all">全部时间</option>
                            <option value="today">今天</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                            <option value="quarter">近三个月</option>
                            <option value="year">今年</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 快速筛选标签 -->
        <div class="mb-4">
            <label class="form-label d-block">热门标签</label>
            <div class="d-flex flex-wrap gap-2">
                <span class="badge bg-primary-light text-primary px-3 py-1 cursor-pointer">全部标签</span>
                <span class="badge bg-light text-secondary px-3 py-1 cursor-pointer">React</span>
                <span class="badge bg-light text-secondary px-3 py-1 cursor-pointer">Python</span>
                <span class="badge bg-light text-secondary px-3 py-1 cursor-pointer">产品设计</span>
                <span class="badge bg-light text-secondary px-3 py-1 cursor-pointer">机器学习</span>
                <span class="badge bg-light text-secondary px-3 py-1 cursor-pointer">求职经验</span>
                <span class="badge bg-light text-secondary px-3 py-1 cursor-pointer">团队管理</span>
                <span class="badge bg-light text-secondary px-3 py-1 cursor-pointer">远程工作</span>
                <span class="badge bg-light text-secondary px-3 py-1 cursor-pointer">...更多</span>
            </div>
        </div>
        
        <!-- 搜索框和筛选按钮 -->
        <div class="d-flex gap-3">
            <div class="flex-grow-1">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="搜索问题、标签或用户...">
                    <button class="btn btn-primary" type="button">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            
            <div class="d-flex gap-2">
                <button class="btn btn-outline-secondary">
                    <i class="fas fa-sliders"></i> 重置
                </button>
                <button class="btn btn-primary">
                    <i class="fas fa-filter"></i> 应用筛选
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 问答列表排序 -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="content-title mb-0">问答列表 (1,284)</h3>
    <div class="d-flex align-items-center gap-3">
        <span class="text-secondary">排序方式:</span>
        <select class="form-select form-select-sm" style="width: auto;">
            <option value="newest">最新发布</option>
            <option value="hot">热门程度</option>
            <option value="most-answers">回答最多</option>
            <option value="unanswered">等待回答</option>
        </select>
    </div>
</div>

<!-- 问答列表内容 -->
<div class="content-list">
    <!-- 问答1 -->
    <div class="content-card">
        <div class="content-body">
            <h3 class="content-title">
                <a href="#">如何有效提升大型React应用的性能？有哪些实用技巧？</a>
            </h3>
            <div class="content-meta mb-3">
                <div class="content-creator">
                    <img src="https://picsum.photos/100/100?random=80" alt="刘开发" class="content-avatar">
                    <span>刘开发</span>
                </div>
                <div>
                    <i class="far fa-clock"></i> 2天前
                </div>
                <div>
                    <i class="fas fa-folder"></i> 前端开发
                </div>
            </div>
            <p class="question-content">
                我们团队正在开发一个大型React应用，随着功能增加，性能问题越来越明显，特别是在组件渲染和状态管理方面。请问有哪些经过实践验证的性能优化技巧？
            </p>
            <div class="d-flex flex-wrap gap-2 mt-2">
                <span class="badge bg-light text-secondary">React</span>
                <span class="badge bg-light text-secondary">性能优化</span>
                <span class="badge bg-light text-secondary">前端</span>
                <div class="answer-count ms-auto">
                    <i class="fas fa-comment"></i> 8个回答
                </div>
            </div>
        </div>
        <div class="content-footer">
            <div class="content-stats">
                <div class="stat-item">
                    <i class="far fa-eye"></i> 1.2k
                </div>
                <div class="stat-item">
                    <i class="far fa-thumbs-up"></i> 42
                </div>
            </div>
            <div class="content-actions">
                <button class="action-btn">
                    <i class="far fa-bookmark"></i> 收藏
                </button>
                <button class="action-btn">
                    <i class="fas fa-share-alt"></i> 分享
                </button>
            </div>
        </div>
    </div>
    
    <!-- 问答2 -->
    <div class="content-card">
        <div class="content-body">
            <h3 class="content-title">
                <a href="#">产品经理如何有效评估AI功能的可行性？</a>
            </h3>
            <div class="content-meta mb-3">
                <div class="content-creator">
                    <img src="https://picsum.photos/100/100?random=81" alt="陈产品" class="content-avatar">
                    <span>陈产品</span>
                </div>
                <div>
                    <i class="far fa-clock"></i> 1周前
                </div>
                <div>
                    <i class="fas fa-folder"></i> 产品管理
                </div>
            </div>
            <p class="question-content">
                作为一名产品经理，我想在我们的产品中加入一些AI功能，但不确定哪些功能是技术上可行的，以及如何评估其开发成本和效果。请问有什么方法或框架可以参考？
            </p>
            <div class="d-flex flex-wrap gap-2 mt-2">
                <span class="badge bg-light text-secondary">产品经理</span>
                <span class="badge bg-light text-secondary">AI</span>
                <span class="badge bg-light text-secondary">可行性分析</span>
                <div class="answer-count ms-auto">
                    <i class="fas fa-comment"></i> 12个回答
                </div>
            </div>
        </div>
        <div class="content-footer">
            <div class="content-stats">
                <div class="stat-item">
                    <i class="far fa-eye"></i> 956
                </div>
                <div class="stat-item">
                    <i class="far fa-thumbs-up"></i> 36
                </div>
            </div>
            <div class="content-actions">
                <button class="action-btn">
                    <i class="far fa-bookmark"></i> 收藏
                </button>
                <button class="action-btn">
                    <i class="fas fa-share-alt"></i> 分享
                </button>
            </div>
        </div>
    </div>
    
    <!-- 更多问答项... -->
</div>

<!-- 分页 -->
<div class="pagination-container">
    <div class="pagination">
        <button class="page-btn disabled">
            <i class="fas fa-chevron-left"></i>
        </button>
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <button class="page-btn">4</button>
        <button class="page-btn">5</button>
        <button class="page-btn">
            <i class="fas fa-chevron-right"></i>
        </button>
    </div>
</div>

<script>
// 筛选功能JavaScript
document.addEventListener('DOMContentLoaded', function() {
    // 标签点击效果
    const filterTags = document.querySelectorAll('.badge.cursor-pointer');
    filterTags.forEach(tag => {
        tag.addEventListener('click', function() {
            // 热门标签切换效果
            if(!this.classList.contains('bg-primary-light')) {
                filterTags.forEach(t => {
                    t.classList.remove('bg-primary-light', 'text-primary');
                    t.classList.add('bg-light', 'text-secondary');
                });
                this.classList.remove('bg-light', 'text-secondary');
                this.classList.add('bg-primary-light', 'text-primary');
                
                showToast(`已筛选: ${this.textContent}`);
            }
        });
    });
    
    // 筛选按钮点击事件
    const applyFilterBtn = document.querySelector('button:contains("应用筛选")');
    if(applyFilterBtn) {
        applyFilterBtn.addEventListener('click', function() {
            showToast('筛选已应用');
        });
    }
    
    // 重置按钮点击事件
    const resetFilterBtn = document.querySelector('button:contains("重置")');
    if(resetFilterBtn) {
        resetFilterBtn.addEventListener('click', function() {
            // 重置表单
            document.querySelectorAll('select').forEach(select => {
                select.selectedIndex = 0;
            });
            document.querySelector('input[type="text"]').value = '';
            
            // 重置标签
            filterTags.forEach((tag, index) => {
                if(index === 0) {
                    tag.classList.remove('bg-light', 'text-secondary');
                    tag.classList.add('bg-primary-light', 'text-primary');
                } else {
                    tag.classList.remove('bg-primary-light', 'text-primary');
                    tag.classList.add('bg-light', 'text-secondary');
                }
            });
            
            showToast('筛选已重置');
        });
    }
    
    // 排序方式变更事件
    const sortSelect = document.querySelector('select');
    if(sortSelect) {
        sortSelect.addEventListener('change', function() {
            const options = this.options;
            const selectedText = options[options.selectedIndex].text;
            showToast(`已按 ${selectedText} 排序`);
        });
    }
});
</script>

